<?php 
	$f_name = "";
	$l_name= "";
	$tran_id ="";
	$create_dt = "";
	$cust_id = "";
	
	if(!empty($customer)){
		$f_name = $customer->F_Name;
		$l_name = $customer->L_Name;
		$cust_id = $customer->Cust_ID;
	}
	if(!empty($result)){
		$tran_id =$result->Tran_ID;
		if(!$goto)
			$create_dt = date("d/m/Y",$result->Create_Dt);
		
	}
	
?>
<link rel='stylesheet' href='<?php echo base_url()?>resources/jquery-popbox/popbox.css' type='text/css' media='screen' charset='utf-8'>
<script type='text/javascript' charset='utf-8' src='<?php echo base_url()?>resources/jquery-popbox/popbox.js'></script>
<script type="text/javascript">
 $(function() {
	//init khoi tao
	reset_service();
	
	//attach autocomplete
	$( "#nguoitip" )
	// don't navigate away from the field on tab when selecting an item
      .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).data( "ui-autocomplete" ).menu.active ) {
          event.preventDefault();
        }
      })
	.autocomplete({
		source: "<?php echo base_url()?>transaction/searchnv",
		focus: function() {
          // prevent value inserted on focus
          return false;
        },
		minLength: 1,
		select: function( event, ui ) {
			var friend = ui.item.value,
			span = $("<span>").text(friend),
			a = $("<a>").addClass("remove").attr({
					href: "javascript:",
					title: "Remove " + friend
				}).text("x").appendTo(span);
						
			//add friend to friend div
			span.insertBefore("#nguoitip");	
			span.append("<input type='hidden' class='ee_id' name='ee_id[]' value='"+ui.item.id+"' />");
			$("#nguoitip").val("");
			return false;
		}
	}).change(function(){
					// alert("chjange");
					$("#nguoitip").val("").css("top", 2);		
					$("#nguoitip").focus();
			});
			
			//auto complete khach hang
	$( "#khachhang" )
	// don't navigate away from the field on tab when selecting an item
      .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).data( "ui-autocomplete" ).menu.active ) {
          event.preventDefault();
        }
      })
	.autocomplete({
		source: "<?php echo base_url()?>customer/search",
		focus: function() {
          // prevent value inserted on focus
          return false;
        },
		minLength: 1,
		select: function( event, ui ) {
			//kiem tra khach hang co dang thuc hien giao dich ma chu hoan thanh ko????
			$.ajax({
					type:'post',
					url:'<?php echo base_url();?>transaction/check_transaction_customer',
					data:{
						cust_id:ui.item.id//Cust_ID
					},
					success:function(data){
						if(parseInt(data)>0) location.href="<?php echo base_url()?>transaction/chitietgiaodich/" + parseInt(data);
					}
				});
			var friend = ui.item.value,
			span = $("<span>").text(friend),
			a = $("<a>").addClass("remove").attr({
					href: "javascript:",
					title: "Remove " + friend
				}).text("x").appendTo(span);
						
			//add friend to friend div
			span.insertBefore("#khachhang");	
			span.append("<input type='hidden' class='cust_id' name='cust_id' id='cust_id' value='"+ui.item.id+"' />");
			$("#khachhang").val("");
			//lay thong tin dich vu lan truoc
				$.ajax({
					type:'post',
					url:'<?php echo base_url();?>transaction/gethistory',
					data:{
						cust_id:ui.item.id//Cust_ID
					},
					success:function(data){
						var R = eval("("+data+")");
						//$("#mCSB_1 .mCSB_container").html("");
						$("#chitiet3 .parent").removeClass("active");
						$("#mCSB_1 .mCSB_container").append(R.html);
						$("#chitiet3").mCustomScrollbar("update"); //update scrollbar according to newly appended content
						khoitao(0);
						xulychondichvu();
					}
				});
			//end
			return false;
		}
	}).change(function(){
					// alert("chjange");
					$("#khachhang").val("").css("top", 2);		
					$("#khachhang").focus();
			});
				
				//add click handler to friends div
				$("#khachhangs").click(function(){
					//focus 'to' field
					$("#khachhang").focus();
				});
				
				//add live handler for clicks on remove links
				$(".remove", document.getElementById("khachhangs")).live("click", function(){
				
					//remove current friend
					$(this).parent().remove();
					
					//correct 'to' field position
					if($("#khachhangs span").length === 0) {
						$("#khachhang").css("top", 0);
					}				
				});		
	//them dich vu	
	$("#btnthemmoidv").click(function(event){
		event.preventDefault();
		//khoi tao dich vu moi
		reset_service();
	});
	
	//save transaction 
	$("#add_new").click(function(event){
		event.preventDefault();
		xl_giaodich();
	});
	
	//save dich vu
	$("#luuservice").click(function(event){
		event.preventDefault(); 
		xl_giaodich();
	});
	//end save dich vu
				
	$("#box_dichvu table tr").click(function(){
		var rel= $(this).attr("rel");
		//lay thong tin service
		$.ajax({
					type: 'post',
					url: "<?php echo base_url();?>transaction/getService",
					data: {
						rel:rel
					},
					success: function(data){
							 var R = eval('(' + data + ')'); 
							 $(".styled-select").html(R.cb_services);
							 $("#gia").val(R.Gia);
							 $("#giam").val(R.Giam);
							 $("#tientip").val(R.TienTip);
							 $("#ghichu").val(R.GhiChu);
							 $("#box_service_id").val(R.ID);
							 $("#box_isphieu").val(R.phieu);
							 $("#box_new").val("0");
							 $("#thanhtien").val(Math.round(parseInt(R.Gia) * (100 - parseInt(R.Giam))/100));
							 $("#box_percent_serv").val(R.Percent_Serv);
							 //nguoi tip
							 $("#nguoitip").val("");
							$("#friends span").remove();
							 var friend = R.e_Name,
							span = $("<span>").text(friend),
							a = $("<a>").addClass("remove").attr({
									href: "javascript:",
									title: "Remove " + friend
								}).text("x").appendTo(span);
										
							//add friend to friend div
							span.insertBefore("#nguoitip");	
							span.append("<input type='hidden' class='ee_id' name='ee_id[]' value='"+R.EE_ID+"' />");	
					},
					statusCode:{
						404: function(){
							
						}
					}
		});
	});
	//tinh toan tien dich vu
	$("#giam").change(function(){
		if(!isNaN($("#giam").val())){
			$("#thanhtien").val(parseInt($("#gia").val()) * (100 - parseInt($("#giam").val()))/100);
		}else{
			alert("Gia tri nhap khong hop le");
			$("#giam").val("0");
			$("#giam").focus();
		}
	});
	$("#gia").change(function(){
		if(!isNaN($("#gia").val())){
			$("#thanhtien").val(Math.round(parseInt($("#gia").val()) * (100 - parseInt($("#giam").val()))/100));
		}else{
			alert("Gia tri nhap khong hop le");
			$("#gia").val("0");
			$("#gia").focus();
		}
	});
	$("#thanhtien").change(function(){
		if(!isNaN($("#thanhtien").val())){
			$("#giam").val(Math.round(100*((parseInt($("#gia").val())- parseInt($(this).val()))/parseInt($("#gia'.$i.'").val()))));
		}else{
			alert("Gia tri nhap khong hop le");
			$("#thanhtien").val("0");
			$("#thanhtien").focus();
		}
	});
	
	$( "#dialog_DOB" ).datepicker({
			showOn: "button",
			changeYear:true,
			changeMonth:true,
			buttonImage: "<?php echo base_url();?>resources/images/calendar.gif",
			buttonImageOnly: true,
			dateFormat: 'dd/mm/yy'
		}).change(function(){
			
	});
	//tabs
	 $( "#tabs" ).tabs({
		beforeLoad: function( event, ui ) {
			ui.jqXHR.error(function() {
				ui.panel.html("Loi ket noi" );
			});
		},
		load: function( event, ui ) {
			$("#tabs-1").css("display","none");
			khoitao(1);
			xulychondichvu();
			//console.log(ui);
		}
	});
 });
 //xl giao dich
 function xl_giaodich(){
 var cust_id = $("#cust_id").val();
 if(!cust_id){alert("Vui long dien ten khach hang.");return false;}
	var arr_serv = [];
	var arr_serv_vip = [];// [xldichvu_parent],[id],[service_id_vip],[sub_service_id_vip],[nhanvientip];[],[],[],[];
	var arr_nv = [];
	var arr_gd = [];
	var arr_rm = [];
	var arr_rm = [];
	var arr_phieu = [];
		$("#chitiet3 .parent").each(function(){
			//arr_serv.push($(this).val());
			var has_group_parent = $(this).parent().hasClass('parent_group');
			if(!has_group_parent){//ko fai dich vu VIP
				arr_serv.push($(this).find("input[name='service']").val());
				arr_nv.push($(this).find("input[name='nhanvien']").val());
				arr_gd.push($(this).find("input[name='xldichvu']").val());
				arr_phieu.push($(this).find("input[name='phieu']").val());
			}
		});
		
		$("#chitiet3 input[name='removexldichvu']").each(function(){
			arr_rm.push($(this).val());
		});
		 //Dich vu VIP
		$("#chitiet3 .parent_group").each(function(){	
			var str_vip="";
			var service_vip_id = $(this).find("input[name='service_vip_id']").val();
			var xldichvu_parent = $(this).find("input[name='xldichvu_parent']").val();
			$(this).find(".parent").each(function(){
				str_vip += xldichvu_parent+ "," +$(this).find("input[name='xldichvu']").val()+ "," + service_vip_id + ","+ $(this).find("input[name='service']").val()+","+$(this).find("input[name='nhanvien']").val()+";"
			});
			arr_serv_vip.push(str_vip);
		});
		if((arr_serv.length + arr_serv_vip.length)<1){alert("Chưa chọn dịch vụ");return false;}

		//kiem tra dich vui vip chua co nhan vien tip
		var fail = false;
		var msg="";
		$("#chitiet3 input[name='nhanvien']").each(function(){
				if(!$(this).val()){
					fail = true;
					if($(this).parent().parent().hasClass("parent_group"))
						msg += "- "+$(this).parent().parent().find("span:first").html()+ "\r\n";
					msg += $(this).parent().find(".service span").attr("title")+"\r\n";
				}
		});
		if(fail){ 
			msg+="phai co nhan vien tip'";
			alert(msg); return;
		}
		var ghichu = $("#ghichu").val();
		var box_new = $("#box_new").val();
		var box_tran_id = $("#box_tran_id").val();
// console.log(arr_serv_vip);
// return;
		var create_dt = $("#Create_Dt").val();
		$.ajax({
					type: 'post',
					url: "<?php echo base_url();?>transaction/saveGiaodich",
					data: {
						ee_id:arr_nv,
						arr_gd:arr_gd,
						arr_rm:arr_rm,
						ghichu:ghichu,
						service_id:arr_serv,
						box_new:box_new,
						box_tran_id:box_tran_id,
						cust_id:cust_id,
						create_dt:create_dt,
						arr_phieu:arr_phieu,
						arr_serv_vip:arr_serv_vip
					},
					success: function(data){
						var R = eval('(' + data + ')'); 
						// console.log(R);
						location.href=R.url;
					},
					statusCode:{
						404: function(){
							
						}
					}
		});
 }
 //xl su kien change dich vu
 function service_change(name){

		var serv_id = $("select[name='"+name+"']").val();
		if(serv_id)
			$.ajax({
				type: 'post',
				url: '<?php echo base_url()?>transaction/getPromotion',
				data: {serv_id: serv_id},
				success: function(data){
					var R = eval('(' + data + ')'); 

					$("#tientip").val(R.TienTip);
					$("#giam").val(R.Discount_Percent);
					$("#box_percent_serv").val(R.Percent_Serv);

					$("#gia").val(R.Money);
					$("#thanhtien").val(R.Price);					
				},
				statusCode:{
					404: function(){
						
					}
				}
			});
		else{
			$("#gia").val("");
			$("#giam").val("");
			$("#nguoitip").val("");
			$("#friends span").remove();
			$("#tientip").val("");
			$("#ghichu").val("");
			$("#thanhtien").val("");
		}
}
function initPage(){
	
}

function tinhlaiGia(){
	 //set price
	var stt = parseInt($("#stt").val());
	var Discount_Percent = 0;
	var Money = 0;
	var Price = 0;
	var i =1;
	for(i=1; i<=stt;i++){
		Discount_Percent += parseInt($("#giam"+i).val());
		Money += parseInt($("#gia"+i).val());
		Price += parseInt($("#thanhtien"+i).val());
	}
	$("#Money").val(Price);
	$("#Discount_Percent").val(Discount_Percent);
	$("#Price").val(Money);	
}
function reset_service(){
		$.ajax({
					type: 'post',
					url: "<?php echo base_url();?>transaction/strService",
					data: {	},
					success: function(data){
						var R = eval('(' + data + ')'); 
						$(".styled-select").html(R.cb_services);
					},
					statusCode:{
						404: function(){
							
						}
					}
		});
		$("#gia").val("");
		$("#giam").val("");
		$("#nguoitip").val("");
		$("#friends span").remove();
		$("#tientip").val("");
		$("#ghichu").val("");
		$("#thanhtien").val("");
		$("#box_new").val("1");
	}
 </script>
 <style>
#add_new{
	background: url("<?php echo base_url()?>resources/images/save-b.png") no-repeat scroll 0 0 transparent;color: #000000;
    float: right;
    height: 60px;
    padding-left: 50px;
    padding-top: 27px;
	position:absolute;
    width: 78px;}
#box_khachhang{float:left;clear:both;width:430px;margin-top:30px;}
#box_khachhang span,#box_khachhang input{float:left;}
#box_khachhang input{background-color:#DDDDDD;border:0;height: 25px;}
#khachhang{width:100px;}
#Create_Dt{width:130px;}
#khadd{ 
	cursor: pointer;
    position: relative;
    top: -5px;}
#box_dichvu{width:820px;}
#btnthemmoidv{background: url("<?php echo base_url()?>resources/images/btnAdd.png") no-repeat scroll 0 0 transparent;color: #000000;
    float: right;
    height: 34px;
    padding-left: 43px;
    padding-top: 18px;
    width: 103px;z-index:1000;position:relative;}
#box_dichvu table{position:relative;top:-39px;}
#box_dichvu table tr{cursor:pointer;}
#chitiet{
	width:434px;
	float:left;
	border-radius: 0;
	clear:both;
	background-color:transparent;
	border:0;
	padding:10px;
	margin-top:10px;
	overflow:hidden;
}
#tabs{
	 -webkit-box-shadow: inset 0px 0px 0px 1px #ccc;
	box-shadow: inset 0px 0px 0px 1px #ccc;
	border:none;
}
#content{min-height:auto;}
span{display:inline-table;}
#chitiet .first{ text-align: left;
    width: 100px;float:left;}
#chitiet input{float:left;}
.styled-select select {
   background: transparent;
   width: 330px;
   padding: 5px;
   line-height: 1;
   border: 0;
   border-radius: 1px;
   height: 34px;
   -webkit-appearance: none;
   }
 .styled-select {
   width: 308px;
   height: 28px;
   overflow: hidden;
   background: url("<?php echo base_url()?>resources/images/dropdown.png") no-repeat right #ddd;
   border: 0;
   float:left;
   }
   #chitiet input{background-color: #DDDDDD;
    padding: 5px;
   line-height: 1;
   border: 0;
   border-radius: 1px;
   height: 18px;}
#chitiet textarea{padding: 5px;
   line-height: 1;
   border: 0;
   border-radius: 1px;
	resize:none;background-color: #DDDDDD;border:0;width: 295px;}
#luuservice{
	background: url("<?php echo base_url()?>resources/images/save-s.png") no-repeat scroll 0 0 transparent;color: #000000;
    float: right;
    height: 26px;
    width: 51px;
	padding-left: 30px;
    padding-top: 15px;
}
#friends{width:300px;float:left;border:0;padding:0;background-color: #DDDDDD;}

#chitiet .ui-state-default, #chitiet .ui-widget-content .ui-state-default, #chitiet .ui-widget-header .ui-state-default {
    background: url("<?php echo base_url()?>resources/images/tabs.png") no-repeat scroll 0 0 transparent;
    border: 0;
    color: transparent;
	width:70px;
	height:45px;
}
#chitiet .ui-helper-reset {
    font-size: 50%;
}
#chitiet .ui-widget-content {
    background-color: #fff;
    color: #D9D9D9;
}
#chitiet .ui-widget-header {
    background: none;
    border: 0;
    color: #F6F6F6;
    font-weight: bold;
}
#chitiet .ui-tabs .ui-tabs-nav li a {
    float: left;
    font-size: 11px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
	padding:5px 0 0 6px;
	overflow:hidden;
	color:#fff;
}

#chitiet .ui-tabs .ui-tabs-nav li {
    border-bottom-width: 0;
    float: none;
    list-style: none outside none;
    margin:0;
    position: relative;
    text-align: justify;
    top: 0;
    vertical-align: middle;
    white-space: pre-wrap;
    word-wrap: break-word;
	display:inline-table;
	cursor:pointer;
	opacity:0.90;
}
#tabs .item{
	background-color: #EEEAEA;
    border: 1px solid #DDDDDD;
    border-radius: 10px 10px 10px 10px;
    cursor: pointer;
    float: left;
    height: 35px;
    margin: 5px;
    max-width: 30px;
	color:#000;
	min-width: 50px;
	font-size:12px;
	padding:3px 20px 4px 8px;
	overflow:hidden;
	-webkit-box-shadow: 0px 0px 3px rgba(52, 50, 50, 0.84);
-moz-box-shadow:    0px 0px 3px rgba(52, 50, 50, 0.84);
box-shadow:         0px 0px 3px rgba(52, 50, 50, 0.84);
}
#tabs .item span{
	width:63px;
}
#chitiet .ui-tabs {
	border-top:0;
	padding:2px 0 0;
	float:left;
	width:419px;
	border-color:#acacac;
	min-height:330px;
}
#chitiet .ui-tabs .ui-tabs-nav{
	left: -2px;
    padding: 0;
    position: relative;
    top: -5px;
    width: 420px;
}
#chitiet .tabs{overflow:auto;}
#chitiet .ui-corner-all, #chitiet .ui-corner-top, #chitiet .ui-corner-left, #chitiet .ui-corner-tl {
    border-top-left-radius: 12px;
}
#chitiet .ui-corner-all, #chitiet .ui-corner-top, #chitiet .ui-corner-right, #chitiet .ui-corner-tr {
    border-top-right-radius: 12px;
}

#chitiet2{
	width:362px;
	float:left;
	border-radius: 10px;
	background-color:transparent;
	border:1px solid #000;
	padding:10px;
	margin-left:10px;
	display:none;
}
#chitiet2 .first{ text-align: left;
    width: 82px;float:left;}
#chitiet2 input{float:left;}

#chitiet2 input{background-color: #DDDDDD;
    padding: 5px;
   line-height: 1;
   border: 0;
   border-radius: 1px;
   height: 18px;}
#chitiet2 textarea{padding: 5px;
   line-height: 1;
   border: 0;
   border-radius: 1px;
	resize:none;background-color: #DDDDDD;border:0;width: 195px;}
#chitiet2 .item{
	background-color: #EEEAEA;
    border: 1px solid #DDDDDD;
    border-radius: 10px 10px 10px 10px;
    cursor: pointer;
    float: left;
    height: 60px;
    margin: 5px;
    max-width: 80px;
    width: 50px;
	color:#000;
	text-align:justify;
	text-justify:inter-word;
	padding:3px 20px 4px 8px;
	-webkit-box-shadow: 0px 0px 3px rgba(52, 50, 50, 0.84);
-moz-box-shadow:    0px 0px 3px rgba(52, 50, 50, 0.84);
box-shadow:         0px 0px 3px rgba(52, 50, 50, 0.84);
}

#chitiet2 .item span{
	 display: block;
    margin: 20px auto;
    text-align: center;
    width: 60px;
}

#chitiet3{
	 background-color: #FFFFFF;
    border-radius: 1px 1px 1px 1px;
    float: right;
    margin-left: 5px;
    padding: 10px;
    width: 357px;
	height:160px;
	overflow:auto;
	 -webkit-box-shadow: 0 0 0 1px #BDC1BD inset;
	box-shadow: 0 0 0 1px #BDC1BD inset;
}
#chitiet3 .first{ text-align: left;
    width: 82px;float:left;}
#chitiet3 input{float:left;}

#chitiet3 input{background-color: #DDDDDD;
    padding: 5px;
   line-height: 1;
   border: 0;
   border-radius: 1px;
   height: 18px;}
#chitiet3 textarea{padding: 5px;
   line-height: 1;
   border: 0;
   border-radius: 1px;
	resize:none;background-color: #DDDDDD;border:0;width: 195px;}
#ghichu{float:right;text-align:left;}
#chitiet3 .item{
	background-color: #F8F4F4;
    border: 1px solid #DDDDDD;
    border-radius: 7px 7px 7px 7px;
    color: #000000;
    cursor: pointer;
    float: left;
    height: 20px;
    margin: 5px;
    padding: 3px 20px 4px 8px;
    width: 100px;
	overflow:hidden;
}
#chitiet3 .nhanvien{
	clear:both;
}
#chitiet3 hr{
 background-color: #DDDDDD;
    float: left;
    height: 1px;
    margin: 0 auto 0 9px;
    width: 78%;
}
.parent{float:left;background-color: #EEEAEA;
    border: 1px solid #DDDDDD;
    border-radius: 7px;margin:3px;width:150px;
	-webkit-box-shadow: 0px 0px 3px rgba(52, 50, 50, 0.84);
-moz-box-shadow:    0px 0px 3px rgba(52, 50, 50, 0.84);
box-shadow:         0px 0px 3px rgba(52, 50, 50, 0.84);
	}
#chitiet3 a {
     color: #000000;
    font: bold 12px Verdana,Sans-serif;
    position: relative;
    right: 2px;
    text-decoration: none;
    top: 2px;
}
#chitiet3 a:hover{
	color:red;
}

#chitiet .ui-tabs-hide{display:none;}
#tabs .active,#chitiet2 .active, #chitiet3 .active{border: 1px solid red;}
.content-left{
float:left;width:434px;}
.content-right{
float:right;width:380px;}
table#comments{width:377px;}
p.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 60px;
	height: 32px;
}
table#comments th{
	background-color: #EEEAEA;
	border-bottom: 1px solid #EEEAEA;
    border-right: 1px solid #EEEAEA;
    border-top: 1px solid #EEEAEA;
	color:#565656;
	
}
li.ui-state-active p.blocktext{
	color:#5F54EE;
}

.button.b-close, .button.bClose {
    border-radius: 7px 7px 7px 7px;
    box-shadow: none;
    font: bold 131% sans-serif;
    padding: 0 6px 2px;
    position: absolute;
    right: 0px;
    top: -29px;
}
.button {
    background-color: #2B91AF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
}
.button:hover {
    background-color: #1E1E1E;
}

.parent_group{
	float:left;background-color: #F8F4F4;
    border: 1px solid #DDDDDD;
    border-radius: 7px;margin:3px;width:317px;
	-webkit-box-shadow: 0px 0px 3px rgba(52, 50, 50, 0.84);
-moz-box-shadow:    0px 0px 3px rgba(52, 50, 50, 0.84);
box-shadow:         0px 0px 3px rgba(52, 50, 50, 0.84);
}
#tabs .item.selected_s{
	background-color: #6495ED;
}
#chitiet2 .title, #popupDescr .title{ 
	 background-color: #6495ED;
    border-radius: 6px 6px 6px 6px;
    color: #FFFFFF;
    display: block;
    font-size: 20px;
    font-weight: bold;
    left: 0;
    position: absolute;
    text-align: center;
    top: -28px;
    width: 93%;
	}
#box_khachhang .ui-datepicker-trigger{
	left: 5px;
    position: relative;
    top: 5px
}
.ui-tabs .ui-tabs-panel{
padding:0 1.4em;}
</style>
<h1>Giao dich - Chi tiet</h1>
<div id="content">
	
	<div id="box_khachhang">
		<span style="width:120px;"><span>Ten khach hang</span> <span class="red">*</span></span><div id="khachhangs" class="ui-helper-clearfix">
		<?php if(!empty($customer)){?><span><?php echo $f_name." ".$l_name;?><!--<a class="remove" href="javascript:" title="Remove Phuoc Nguyen">x</a>--><input type="hidden" value="<?php echo $cust_id;?>" name="cust_id" id="cust_id" class="cust_id"></span>
		<?php }?>
		<input type="text" id="khachhang" name="khachhang" value="" /></div><img id="khadd" src="<?php echo base_url()?>resources/images/btncong.png" />		
		<div class="both" style="float: left; margin-top: -6px;">
		<span style="width:120px;"><span>Ngay</span> <span class="red">*</span> </span><input id="Create_Dt" type="text" name="Create_Dt" value="<?php echo $create_dt;?>"  />	
		</div>
	</div>
	<a id="add_new" href="<?php echo base_url();?>transaction/">Luu</a>			
	<div class="content-left">
<div id="chitiet">	
	<!-- tabs -->
	<div id="tabs" style="display:none;">
		<ul>
		<?php 
		foreach($categories as $k=> $item){
			// if($k==0)
				// echo '<li><a href="#tabs-1">'.$item['Name'].'</a></li>';
			// else{
				$style="";
				if($k>5) $style='style="position: relative; top: -13px;left:0px;"';
				echo '<li '.$style.'><a title="'.$item['Name'].'" href="'.base_url().'transaction/getListServiceFollowDM/?id='.$item['Ca_ID'].'"><p class="blocktext">'.cat_chuoi($item['Name'],25).'</p></a></li>';
			// }
		}?>
		<!--
		<li><a href="#tabs-1">Mat</a></li>
		<li><a href="ajax/content1.html">Dieu Tri Da Mat</a></li>
		<li><a href="ajax/content2.html">Body</a></li>
		<li><a href="ajax/content3-slow.php">Dieu tri mo dui, bung</a></li>
		<li><a href="ajax/content4-broken.php">Foot care</a></li>
		<li><a href="ajax/content4-broken.php">Dich vu tron goi</a></li>
		<li><a href="ajax/content4-broken.php">Waxing</a></li>
		<li><a href="ajax/content4-broken.php">Tam</a></li>
		<li><a href="ajax/content4-broken.php">Khac</a></li>
		-->
		</ul>
		<div class="tabs" id="tabs-1">
			<!-- dich vu -- >
			<div class="item"><span>ten dich vu 1</span><input type="hidden" name="service" value="abc" /></div>
			<div class="item"><span>ten dich vu 2</span><input type="hidden" name="service" value="edf" /></div>
			<!-- end dich vu -->
		</div>
	</div><!-- end tabs -->
	<!-- 
	<div class="both" style="float: left;">
		<span class="first">Dich vu</span><div class="styled-select"><select></select></div>
	</div>

	<div class="both" style="float: left;margin-top:5px;">
		<span class="first">Khuyen mai</span> <input id="giam" type="text" name="giam" value="" size="20" />
	</div>
	<div class="both" style="float: left;margin-top:5px;">
		<span class="first">Nhan vien</span> <div id="friends" class="ui-helper-clearfix"><input id="nguoitip" type="text" name="nguoitip"/></div>
	</div>
	-->
	<input type="hidden" id="box_service_id" name="box_service_id" value="" />
	<input type="hidden" id="box_isphieu" name="box_isphieu" value="" />
	<input type="hidden" id="box_new" name="box_new" value="1" />
	<input type="hidden" id="box_tran_id" name="box_tran_id" value="<?php echo $tran_id;?>" />
	<input type="hidden" id="box_percent_serv" name="box_percent_serv" value="" />
	<div class="both"></div>
</div><!-- end chi tiet -->
<div id="chitiet2">	
	<span class="button b-close"><span>X</span></span>
	<span class="title">Chon nhan vien</span>
	<?php foreach($employers as $item){?>
	<div class="item"><span><?php echo $item['Name'];?></span><input type="hidden" name="nhanvien" value="<?php echo $item['EE_ID'];?>" /></div>
	<?php } ?>
	<div class="both"></div>
</div><!-- end chitiet2 -->
</div><!-- end content-left -->
<div class="content-right">
<div style="float: left; width: 115px; text-align: left; margin-top: 15px; font-weight:bold;">Dich vu chon</div>
<div id="chitiet3">	
<!-- goi y -->
<?php foreach($services as $item){
?>	
	<div class="parent" >
		<div class="item service shadow"><span title="<?php echo $item['Serv_Full'];?>"><?php echo cat_chuoi($item['Serv_Full'],15);?></span></div> 
		<hr />
		<div class="item nhanvien shadow"><span><?php echo $item['e_Name'];?></span></div>
		<hr />
		<div class="item descr shadow"><span>Mô tả</span></div>
		<a class="remove" href="javascript:" title="Remove <?php echo $item['e_Name'];?>">x</a><input type="hidden" name="service" value="<?php echo $item['Serv_ID'];?>" /><input type="hidden" name="nhanvien" value="<?php echo $item['EE_ID'];?>" /><input type="hidden" name="xldichvu" value="<?php echo ($goto)?"0":$item['ID'];?>" />
		<?php if($item['SoSuat']!=""){?>
		<input type="hidden" name="phieu" value="<?php echo $item['SoSuat'];?>,<?php echo $item['Tang'];?>,<?php echo $item['Conlai'];?>,<?php echo $item['Giam'];?>,<?php echo $item['TienTip'];?>,<?php echo $item['PhieuCode'];?>" />
		<?php } ?>
	</div>
	<?php }?>
	<?php foreach($services_vip as $item){?>
	<div class="parent_group"><span style="width: 300px;font-weight:bold;color:#cfa62b;"><?php echo $item['Serv_Name']."-".$item['Name'];?></span><a title="Remove " href="javascript:" style="position: relative; top: -3px; right: 1px;" class="remove">x</a>
		<?php foreach($item['child'] as $k=> $child){
			$full_name = $child['Serv_Name'].' - '.$child['Name'];
			$full_name_short = cat_chuoi($full_name,15);
		?>
		<div class="parent" style="border: 1px solid transparent;"><div class="item service shadow"><span title="<?php echo $full_name;?>"><?php echo $full_name_short;?></span></div> <hr><div class="item nhanvien shadow" rel="#chitiet3 .nhapnhay<?php echo $k;?>"><span><?php echo $child['e_Name'];?></span></div><hr><div class="item descr shadow"><span>Mô tả</span></div><input type="hidden" value="<?php echo $child['Serv_ID'];?>" name="service"><input type="hidden" value="<?php echo $child['EE_ID'];?>" name="nhanvien"><input type="hidden" value="<?php echo ($goto)?"0":$child['ID'];?>" name="xldichvu"><input type="hidden" value="" name="phieu"></div>
		<?php }?>
	<input type="hidden" value="<?php echo $item['Serv_ID'];?>" name="service_vip_id"><input type="hidden" value="<?php echo ($goto)?"0":$item['ID'];?>" name="xldichvu_parent"></div>
	<?php }?>
<!-- end -->
</div><!-- end chitiet3 -->
<div id="ghichu">
	<span style="font-weight:bold;">Ghi chu</span>
	<img src="<?php echo base_url();?>resources/images/btncong.png" id="ghichuadd">
	<table id="comments">
		<tr id="header_cmt">
			<th>Ngay</th>
			<th>Ghi chu</th>
			<th>x</th>
		</tr>
		<?php foreach($comments as $item){?>
		<tr id="cmt_<?php echo $item['ID'];?>">
			<td><?php echo date("d/m",$item['Create_Dt']);?></td>
			<td><span title="<?php echo $item['Comment'];?>"><?php echo cat_chuoi($item['Comment'],35);?></span></td>
			<td><a title="Xoa" onclick="return deleteCmt('<?php echo $item['ID'];?>');" class="preventDefault" href="#">x</a></td>
		</tr>
		<?php }?>
	</table>
</div><!-- end ghi chu -->
</div> <!-- end content-right -->
</div>
<div class="both" style="height:10px;"></div>
</div>
<style>
		.dialog-form label, .dialog-form input { display:table-inline; }
		.dialog-form input.text { margin-bottom:12px; width:92%; padding: .4em; }
		.dialog-form fieldset { padding:0; border:0; margin-top:25px; }
		.dialog-form h1 { font-size: 1.2em; margin: .6em 0; }
		.dialog-form .ui-dialog .ui-state-error { padding: .3em; }
		.dialog-form .validateTips { border: 1px solid transparent; padding: 0.3em; }
		#popupDescr{
			display:none;
			width:410px;
			float:left;
			border-radius: 10px;
			background-color:#fff;
			border:1px solid #000;
			padding:10px;
			margin-left:10px;
			display:none;
		}
		#chitiet3 .nhapnhay{ border:1px solid red;}
		#chitiet .ui-state-active{
            background: url("<?php echo base_url() ?>resources/images/tabs-selected.png")
                no-repeat scroll 0 0 transparent !important;
            border: 0;
            width: 70px;
            height: 45px;
            color: #ffffff !important;
            font-weight: bold !important;
        }
		#chitiet3 .service{
			background-color:#6495ED;
		}
		.shadow {
		  -moz-box-shadow:    3px 3px 5px 6px #ccc;
		  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
		  box-shadow:         3px 3px 5px 6px #ccc;
		}
		#chitiet3 .descr{
			margin-bottom:15px;
		}
	</style>
<script type="text/javascript">
function mycode(t) {
	// do some stuff...
	if(!$(t).hasClass("nhapnhay")){
		$(t).addClass("nhapnhay");
	}else{ 
		$(t).removeClass("nhapnhay");
	}
	tid = setTimeout('mycode("'+t+'")', 500); // repeat myself
	if($(t).parent().find("input[name='nhanvien']").val()!=""){
		clearTimeout(tid);
		$(t).removeClass("nhapnhay");
	}
}
function nhapnhay(){
	$("#chitiet3 .nhanvien").each(function(){
		
		if($(this).parent().find("input[name='nhanvien']").val()==""){
		
			mycode($(this).attr("rel"));
		}
	});
}

function loadingTabs(i){
	if($("#tabs").css("display")!="none")
		$("#tabs").css("display","none");
	i++;
	tid = setTimeout('loadingTabs('+i+')', 100); // repeat myself
	if(i==10){
		clearTimeout(tid);
		$("#tabs").show("slow");
	}
}

	$(function(){
			loadingTabs(1);
			xulychondichvu();
			$("#chitiet .ui-tabs .ui-tabs-nav li").click(function(){
				$(this).find("a").click();
			});
			//event click nhan vien
			$("#chitiet2 div.item").click(function(){
				var serv = $("#tabs .selected input[name='service']").val();
				var serv_name = $("#tabs .selected span").html();
				var serv_name_title = $("#tabs .selected span").attr("title");
				var nv = $("#chitiet2 .selected input[name='nhanvien']").val();
				var nv_name = $("#chitiet2 .selected span").html();
				if(!nv_name) {
					nv_name=$(this).find("span").html();
					nv=$(this).find("input[name='nhanvien']").val();
				}
				
				
				var selected_serv = $("#chitiet3 .selected input[name='service']").val();

				if(!selected_serv){ // tao moi
					$("#chitiet3 .parent").removeClass("selected");
					var category_name = $("#tabs .selected").find("input[name='category_name']").val();
					var html = '<div class="parent"><div class="item service shadow"><span title="'+serv_name_title+'('+category_name+')'+'">'+serv_name+'</span></div> <hr/><div class="item nhanvien shadow"><span>'+nv_name+'</span></div><hr/><div class="item descr shadow"><span>Mô tả</span></div><a class="remove" href="javascript:" title="Remove ten dich vu 1">x</a><input type="hidden" name="service" value="'+serv+'" /><input type="hidden" name="nhanvien" value="'+nv+'" /><input type="hidden" name="xldichvu" value="0" /></div>';
					// $("#chitiet3").append(html);
					
					$("#mCSB_1 .mCSB_container").append(html);
					$("#chitiet3").mCustomScrollbar("update"); //update scrollbar according to newly appended content
					khoitao(0);
					xulychondichvu();
				}else{
					//$("#chitiet3 .selected input[name='service']").val(serv);
					$("#chitiet3 .selected input[name='nhanvien']").val(nv);
					//$("#chitiet3 .selected .service span").html(serv_name);
					$("#chitiet3 .selected .nhanvien span").html(nv_name);
				}
				$('#chitiet2').bPopup().close();
			});
			//event nhan vien
			//event click
			/*
			$("#chitiet2 div.item").click(function(){
				var isactive = $(this).hasClass("active");
				$("#chitiet2 div.item").css("border","");
				$("#chitiet2 div.item").removeClass("active");
				if(!isactive)
					$(this).addClass("active");		
				else 
					$(this).removeClass("active");						
			});*/
			//event hover
			$("#chitiet2 div.item").hover( function () {
					$(this).css("border","1px solid red");
				},
				function () {
					if(!$(this).hasClass("active"))
						$(this).css("border","1px solid transparent	");
			});	
			khoitao();
					
			var dialog_F_Name = $( "#dialog_F_Name" ),
			dialog_L_Name = $( "#dialog_L_Name" ),
			dialog_DOB = $( "#dialog_DOB" ),
			dialog_Phone_NO = $( "#dialog_Phone_NO" ),
			tips = $( ".validateTips" );
			// kh_allFields = $( [] ).add( check_User_ID ).add( check_password );
		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}
		$( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 570,
			width: 570,
			modal: true,
			buttons: {
				"Tao moi": function() {
					var bValid = true;					
					//check_allFields.removeClass( "ui-state-error" );
					if(!$("#dialog_L_Name").val()) { bValid=false; updateTips("Vui lòng điền tên.");}
					if(bValid){
						$.ajax({
							type: 'post',
							url: '<?php echo base_url()?>transaction/add_new_customer',
							data: {F_Name: $("#dialog_F_Name").val(),
								L_Name: $("#dialog_L_Name").val(),
								DOB: $("#dialog_DOB").val(),
								Phone_NO: $("#dialog_Phone_NO").val()
								},
							success: function(data){
									 var R = eval('(' + data + ')');   
									// $("#Cust_ID").val(R.Cust_ID);
									// $("#khachhang").val(R.F_Name + " " +R.L_Name);
									// $("#customer_new").hide("slow");
									 //khach hang
									 $("#khachhang").val("");
									$("#khachhangs span").remove();
									 var friend = R.F_Name + " " +R.L_Name,
									span = $("<span>").text(friend),
									a = $("<a>").addClass("remove").attr({
											href: "javascript:",
											title: "Remove " + friend
										}).text("x").appendTo(span);
												
									//add friend to friend div
									span.insertBefore("#khachhang");	
									span.append("<input type='hidden' class='cust_id' id='cust_id' name='cust_id' value='"+R.Cust_ID+"' />");
									$( "#dialog-form" ).dialog( "close" );	
									//tao moi khach hang ==> transaction new
									$("#box_tran_id").val("0");
									$("#Create_Dt").val("");
									$("#box_dichvu tr.child").remove();									
									reset_service();
							},
							statusCode:{
								404: function(){
									
								}
							}
						});
					}					
				},
				"Hủy": function() {
					$( this ).dialog( "close" );
					return false;
				}
			},
			close: function() {
				//check_allFields.val( "" ).removeClass( "ui-state-error" );
				return false;
			}
		});
		$( "#khadd" ).click(function() {
				$( "#dialog-form" ).dialog( "open" );		
		});	
		
		//dialog add ghi chu
		 $( "#dialog-form-cmt" ).dialog({
			autoOpen: false,
			height: 400,
			width: 570,
			modal: true,
			buttons: {
				"Tao moi": function() {
					var bValid = true;					
					//check_allFields.removeClass( "ui-state-error" );
					if(!$("#dialog_cmt").val()) { bValid=false; updateTips("Vui lòng điền ghi chu'.");}
					if(bValid){
						$.ajax({
							type: 'post',
							url: '<?php echo base_url()?>transaction/add_new_cmt',
							data: {
								comment: $("#dialog_cmt").val(),
								tran_id: $("#box_tran_id").val(),
								cust_id: $("#cust_id").val()
								},
							success: function(data){
									 var R = eval('(' + data + ')');  
									if($("#box_tran_id").val()==0) $("#box_tran_id").val(R.Tran_ID);
									$("#header_cmt").after(R.html);
									$( "#dialog-form-cmt" ).dialog( "close" );
							},
							statusCode:{
								404: function(){
									
								}
							}
						});
					}					
				},
				"Hủy": function() {
					$( this ).dialog( "close" );
					return false;
				}
			},
			close: function() {
				//check_allFields.val( "" ).removeClass( "ui-state-error" );
				return false;
			}
		});
		$( "#ghichuadd" ).click(function() {
			 var cust_id = $("#cust_id").val();
			$("#dialog_cmt").val("");
			$(".validateTips").html("");
				if(cust_id){
					$( "#dialog-form-cmt" ).dialog( "open" );		
				}else{
					alert("Nhap khach hang");
				}	
		});	
		//end ghi chu
		
		
	});
	
	function khoitao(istabs){	
	// event dich vu
			//event hover
			if(istabs){
				eventClickTab();
			}else{
				eventgiaodich();
			}
	}
	//xu ly su kien giao dich
	function eventgiaodich(){
		//event selected
				//event click
				/*
				$("#chitiet3 div.parent").click(function(){
					var isactive = $(this).hasClass("active");
					$("#chitiet3 div.parent").css("border","");
					$("#chitiet3 div.parent").removeClass("active");
					if(!isactive)
						$(this).addClass("active");		
					else 
						$(this).removeClass("active");		
				});*/
				//event hover
				$("#chitiet3 div.parent").hover( function () {
						$(this).css("border","1px solid red");
					},
					function () {
						if(!$(this).hasClass("active"))
							$(this).css("border","1px solid transparent");
				});	
				
				//add live handler for clicks on remove links
				$(".remove", document.getElementById("chitiet3")).live("click", function(){
						//remove current service
					//alert($(this).parent().find("input[name='xldichvu']").val());
					if(!$(this).parent().hasClass('parent_group')){
						$("#chitiet3").append('<input type="hidden" name="removexldichvu" value="'+$(this).parent().find("input[name='xldichvu']").val()+'" />');
					}else{
						$("#chitiet3").append('<input type="hidden" name="removexldichvu" value="'+$(this).parent().find("input[name='xldichvu_parent']").val()+'" />');
					}
					$(this).parent().remove();	
					$("#chitiet3").mCustomScrollbar("update"); 
					xulychondichvu();
					
				});
				
				//pop up nhan vien
				/* ko can thiet * /
				$("#chitiet3 div.service").click(function(){
					$(this).parent().addClass("selected");
					popupService();
				});
				/* end */
				$("#chitiet3 div.nhanvien").click(function(){
					$(this).parent().addClass("selected");
					popupNV();
				});
				
				$("#chitiet3 div.descr").click(function(){
					$(this).parent().addClass("selected");
					popupDescr();
				});
				
	}
	//popup danh sach dich vu
	function popupService(){
		$(this).parent().addClass("active");
					 $('#chitiet').bPopup({
						speed: 650,
						transition: 'slideIn',
						 onOpen: function(){ //doMagic 
							$("#chitiet .ui-widget-content").css("background-color","#fff");
						 },
						  onClose: function(){ //doMagic
							$("#chitiet .ui-widget-content").css("background-color","transparent");
							var chitiet = $("#chitiet");
							$("#chitiet2").before(chitiet);
							$("#chitiet").attr("style","");
							removeClassSelectedBox();
						  }
		});
	}
	
	function xulychondichvu(){
		//lay dich vu trong dich vu da chon
		var arr_service = [];
		
		$("#chitiet3 .parent").each(function(){
			//arr_serv.push($(this).val());
			var has_group_parent = $(this).parent().hasClass('parent_group');
			if(!has_group_parent){//ko fai dich vu VIP
				arr_service.push($(this).find("input[name='service']").val());
			}else{
				arr_service.push($(this).parent().find("input[name='service_vip_id']").val());
			}
		});
		var i;
		//deseleted item in tabs
		$("#tabs .item").removeClass("selected_s");
		for(i = 0;i<arr_service.length;i++){
			$("#tabs .item").each(function(){
				if($(this).find("input[name='service']").val() == arr_service[i])
					$(this).addClass("selected_s");
			});
		}
		
		//console.log(arr_service);
		
	}
	
	//popup danh sach dich vu
	function popupDescr(){
		// lấy thông tin dich vụ
		var serv_id = $("#chitiet3 .selected input[name='service']").val();
		$.ajax({
			type: 'post',
				url: '<?php echo base_url()?>transaction/getServInfo',
				data: {
					serv_id: serv_id
				},
				success: function(data){
					var R = eval('(' + data + ')');   	
					$("#popupDescr .content").html(R.html);
				},
				statusCode:{
					404: function(){
										
					}
				}
		});
					 $('#popupDescr').bPopup({
						speed: 650,
						transition: 'slideIn',
						 onOpen: function(){ //doMagic 
							
						 },
						  onClose: function(){ //doMagic
							removeClassSelectedBox();
						  }
		});
	}
	
	function removeClassSelectedBox(){
		$("#chitiet3 .parent").removeClass("selected");
	}
	//popup danh sach nhan vien
	function popupNV(){
		$(this).parent().addClass("active");
					 $('#chitiet2').bPopup({
						speed: 650,
						transition: 'slideIn',
						 onOpen: function(){ //doMagic 
							$("#chitiet2").css("background-color","#fff");
						 },
						  onClose: function(){ //doMagic
							$("#chitiet2").css("background-color","transparent");
							var chitiet2 = $("#chitiet2");
							$("#chitiet").after(chitiet2);
							$("#chitiet2").attr("style","");
							removeClassSelectedBox();
						  }
					});
	}
	//xoa ghi chu
	function deleteCmt(id){
		//xoa trong database
		var answer = confirm("Co' muon xoa ghi chu' hok???")
		if (answer){
			$.ajax({
				type: 'post',
				url: '<?php echo base_url()?>transaction/del_cmt',
				data: {
					id: id
				},
				success: function(data){
					// var R = eval('(' + data + ')');   	
					console.log(data);
				},
				statusCode:{
					404: function(){
										
					}
				}
			});
			$('#cmt_'+id).remove();
		}
		return false;
	}
	//su kien click tab
	function eventClickTab(){
		//remove selected box giao dich
		$("#chitiet3").removeClass("selected");
		$("#tabs div.item").hover( function () {
						$(this).css("border","1px solid red");
					},
					function () {
						if(!$(this).hasClass("active"))
							$(this).css("border","1px solid transparent	");
				});
				//event click
				/*
				$("#tabs div.item").click(function(){
					var isactive = $(this).hasClass("active");
					$("#tabs div.item").css("border","");
					$("#tabs div.item").removeClass("active");
					if(!isactive)
						$(this).addClass("active");		
					else 
						$(this).removeClass("active");		
				});*/
				$("#tabs div.item").click(function(){
					//kiem tra co' fai la` dich vu VIP khong???
					// var isselected = $(this).hasClass("selected_s");
					// if(isselected){
						// alert("Dich vu nay da dc chon.");
						// return;
					// }
					var isvip = $(this).find("input[name='vip']").val();
					if(parseInt(isvip) == 1){ // dich vu VIP
						var serv_id = $(this).find("input[name='service']").val();
						//chen` dich vu con cua dich vu vip nay vao giao dich
						$.ajax({
							type: 'post',
								url: '<?php echo base_url()?>transaction/getListServiceVIP',
								data: {
									serv_id: serv_id
								},
								success: function(data){
									//var R = eval('(' + data + ')');   	
									// $("#popupDescr .content").html(R.html);
									$("#mCSB_1 .mCSB_container").append(data);
									$("#chitiet3").mCustomScrollbar("update"); //update scrollbar according to newly appended content
									khoitao(0);
									nhapnhay();
									xulychondichvu();
								},
								statusCode:{
									404: function(){
														
									}
								}
						});
						
					}else{ //ko fai dich vu VIP
						$("#tabs div.item").removeClass("selected");
						 $(this).addClass("selected");
						var serv = $("#tabs .selected input[name='service']").val();
						var serv_name = $("#tabs .selected span").html();
						// if(!serv_name) {
							// serv_name=$(this).find("span").html();
							// serv=$(this).find("input[name='service']").val();
						// }
						var isselected = $("#chitiet3 .selected input[name='service']").val();
						if(!isselected){
							//pop up nhan vien
							popupNV();
						}else{
							$("#chitiet3 .selected input[name='service']").val(serv);
							//$("#chitiet3 .active input[name='nhanvien']").val(nv);
							$("#chitiet3 .selected .service span").html(serv_name);
							//$("#chitiet3 .active .nhanvien span").html(nv_name);	
							$('#chitiet').bPopup().close();
						}
					}		
					return false;	
				});
	}
	 (function($){
        $(window).load(function(){
            $("#chitiet3").mCustomScrollbar({
			scrollButtons:{ /*scroll buttons*/
					enable:true, /*scroll buttons support: boolean*/
					scrollType:"continuous", /*scroll buttons scrolling type: "continuous", "pixels"*/
					scrollSpeed:"auto", /*scroll buttons continuous scrolling speed: integer, "auto"*/
					scrollAmount:40 /*scroll buttons pixels scroll amount: integer (pixels)*/
				}
			});
        });
    })(jQuery);
</script>
<!-- box up them nhan vien -->
<div id="dialog-form" class="dialog-form" title="Them khach hang">
	<p class="validateTips">Điền đầy đủ thông tin bên dưới.</p>

	<form>
	<fieldset>
		<label for="dialog_F_Name">Ho</label>
		<input type="text" name="dialog_F_Name" id="dialog_F_Name" placeholder="Ho" class="text ui-widget-content ui-corner-all" />
		<label for="dialog_L_Name">Tên</label>
		<input type="text" name="dialog_L_Name" id="dialog_L_Name" placeholder="Ten" class="text ui-widget-content ui-corner-all" />
		<label for="dialog_DOB">Ngay sinh</label>
		<input type="text" name="dialog_DOB" id="dialog_DOB" placeholder="Ngay sinh" class="text ui-widget-content ui-corner-all" />
		<label for="dialog_Phone_NO">So DT</label>
		<input type="text" name="dialog_Phone_NO" id="dialog_Phone_NO" placeholder="so dien thoai" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
</div><!-- end dialog-form -->
<div id="popupDescr">
	<span class="button b-close"><span>X</span></span>
	<span class="title">Mo ta</span>
	<span class="content">
	</span>
</div>
<!-- box up them comment -->
<div id="dialog-form-cmt" class="dialog-form" title="Them ghi chu">
	<p class="validateTips"></p>
	<form>
	<fieldset>
		<label for="dialog_comment">Ghi chu</label>
		<textarea id="dialog_cmt" rows="5" cols="51" name="dialog_cmt" class="text ui-widget-content ui-corner-all"></textarea>
	</fieldset>
	</form>
</div><!-- end dialog-form -->